<template>
  <div class="demo-dialog">
    <el-dialog v-model="demoDialog" :title="props.dialogTitle" width="500" align-center>
      <el-form ref="ruleFormRef" :model="ruleForm" label-width="80px" :rules="dialogRules">
        <el-form-item label="资源标题" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="批次编号" prop="batch">
          <el-input v-model="ruleForm.batch" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
          <el-button @click="resetForm(ruleFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import * as FormApi from '@/api/picture'
import { ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

const emits = defineEmits(['subEvent'])
interface RuleForm {
  name: string
  batch: string
}
const ruleForm = reactive({
  name: '',
  batch: ''
})
const dialogRules = reactive<FormRules<RuleForm>>({
  name: [{ required: true, trigger: ['blur', 'change'], message: '请填写资源标题' }],
  batch: []
})
const ruleFormRef = ref<FormInstance>()
const demoDialog = ref(false)
const props = defineProps({
  dialogTitle: String
})
const open = async (data: any) => {
  console.log(data)
  demoDialog.value = true
}
defineExpose({ open })
// 弹窗确定
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      const params = {
        name: ruleForm.name, // 名称
        batch: ruleForm.batch, // 批次编号
        format: 'folder', // 格式
        fileSize: 0, // 文件大小
        atlas: true, // 是否图集 true 是图集 false 是图片
        type: 10, // 图片类型
        status: 0 // 状态
      }
      FormApi.pictureFolder(params).then((res) => {
        // getList()
        demoDialog.value = false
        emits('subEvent')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
// 弹窗取消
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  demoDialog.value = false
}
</script>
<style lang="scss" scoped>
.demo-dialog {
}
</style>
